<template>
  <div class="home">
    <div class="header box-card">
      <div class="categoryList">
        <div
          class="text item"
          :class="{ 'category-is-active': '' === activeIndex }"
          @click="onClickTob({ id: '', name: '全部' })"
        >
          <div class="all">全部</div>
        </div>
        <div
          v-for="(o, index) in categoryList"
          :key="o.id"
          class="text item"
          :class="{ 'category-is-active': o.id === activeIndex }"
          @click="onClickTob(o)"
        >
          <span> {{ o.name }}</span>
        </div>
      </div>
      <div class="categoryList">
        <div
          class="text item"
          :class="{ 'category-is-active': '' === active2Index }"
          @click="onClickCenter({ id: '', name: '全部' })"
        >
          <div class="all">全部</div>
        </div>
        <div
          v-for="(o, index) in centerList"
          :key="o.id"
          :class="{ 'category-is-active': o.id === active2Index }"
          class="text item"
          @click="onClickCenter(o)"
        >
          <span> {{ o.name }}</span>
        </div>
      </div>
      <div class="categoryList">
        <div
          class="text item"
          :class="{ 'category-is-active': '' === active3Index }"
          @click="onClickBottom({ id: '', name: '全部' })"
        >
          <div class="all">全部</div>
        </div>
        <div
          v-for="(o, index) in bottomList"
          :key="index"
          :class="{ 'category-is-active': o.id === active3Index }"
          class="text item"
          @click="onClickBottom(o)"
        >
          <span> {{ o.name }}</span>
        </div>
      </div>
    </div>

    <div class="tabs">
      <span
        class="tabs-item"
        :class="{ 'category-is-active': params.desc === 'id' }"
        @click="onChangeTabs('id')"
      >默认</span>
      <span
        class="tabs-item"
        :class="{ 'category-is-active': params.desc === 'update_time' }"
        @click="onChangeTabs('update_time')"
      >最新</span>
    </div>

    <div class="flex items-start container">
      <ul class="list clearfix">
        <li
          v-for="(item, index) in tabelList"
          :key="item.id"
          class="infinite-list border-b-2 list-item"
          style="overflow: auto"
          @click="onClickToDetail(item)"
        >
          <div class="title">{{ item.title }}</div>
          <div class="card">
            <img :src="item.cover" class="image">
            <div class="content">
              <div class="introduce title-Hidden-three">
                {{ item.introduce }}
              </div>
              <div class="update_time">{{ item.update_time }}</div>
            </div>
          </div>
        </li>
      </ul>
      <div class="user flex-1">
        <template v-if="token">
          <div class="flex items-center justify-center">
            <el-avatar size="large" :src="userInfo.avatar" />
          </div>
          <div class="username text-2xl font-bold mt-1 text-center">
            {{ userInfo.username }}
          </div>
          <div class="username text-gray-500 font-bold mt-1 text-center">
            {{ userInfo.phone }}
          </div>
        </template>
        <template v-else>
          <div class="flex items-center justify-center">
            <el-avatar
              size="large"
              src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"
            />
          </div>
          <div class="username text-2xl font-bold mt-1 text-center">游客</div>

          <div
            class="username text-gray-500 font-bold mt-1 text-center"
            @click="onLogin"
          >
            点击登录
          </div>
        </template>
        <div class="flex mt-1 user-cell" @click="onClickRouter('/healthRecords/record')">
          <span class="flex-1 text-black">个人健康记录</span>
          <el-icon name="arrow-right" />
        </div>
        <div
          class="flex mt-1 user-cell"
          @click="onClickRouter('/questionnaire/history')"
        >
          <span class="flex-1 text-black">问卷历史</span>
          <el-icon name="arrow-right" />
        </div>
        <div
          class="flex mt-1 user-cell"
          @click="onClickRouter('/course/history')"
        >
          <span class="flex-1 text-black">观看历史</span>
          <el-icon name="arrow-right" />
        </div>
        <div class="flex mt-1 user-cell" @click="onlogout">
          <span class="flex-1 text-black">退出登录</span>
          <el-icon name="arrow-right" />
        </div>
      </div>
    </div>

    <div class="pagination">
      <Pagination
        :page-sizes="paginationConfig.pageSizes"
        :layout="paginationConfig.layout"
        :total="paginationConfig.total"
        :page="paginationConfig.page"
        :limit="paginationConfig.pageSize"
        @pagination="handleChangePage"
      />
    </div>
  </div>
</template>

<script>
import { getCategoryList } from 'api/category'
import { getKnowledgeList } from 'api/knowledge'
import { mapGetters } from 'vuex'
export default {
  name: 'Home',
  data() {
    return {
      tabelList: [],
      categoryList: [],
      activeIndex: '',
      activeItem: null,
      active2Index: '',
      active2Item: null,
      active3Index: '',
      active3Item: null,
      params: {
        desc: 'id'
      },
      cardStyle: {
        padding: '0px',
        display: 'flex',
        alignItems: 'flex-start'
      },
      paginationConfig: {
        direction: 'center', // 分页位置
        layout: 'total, sizes, prev, pager, next, jumper', // 分页类型
        pageSizes: [5, 10, 20], // 分页pages
        total: 0,
        page: 1, // 页数-默认1
        pageSize: 5 // 每页条数-默认10
      }
    }
  },
  computed: {
    ...mapGetters(['userInfo', 'token']),
    centerList({ activeIndex, categoryList }) {
      if (activeIndex === '') {
        return (
          categoryList?.reduce((pre, cur) => {
            return pre.concat(cur.children || [])
          }, []) || []
        )
      } else {
        const index = categoryList.findIndex((o) => o.id === activeIndex)
        return index !== -1 ? categoryList[index].children : []
      }
    },
    bottomList({ active2Index, centerList }) {
      if (active2Index === '') {
        return (
          centerList?.reduce((pre, cur) => {
            return pre.concat(cur.children || [])
          }, []) || []
        )
      } else {
        const index = centerList.findIndex((o) => o.id === this.active2Index)
        return index !== -1 ? centerList[index].children : []
      }
    }
  },
  created() {
    this.getCategoryList()
    this.onClickTob({ id: '', name: '全部' })
  },
  methods: {
    load() {
      console.log('=======')
    },
    async getList(categoryId) {
      const { page, pageSize } = this.paginationConfig
      let str = ''
      if (this.activeIndex) str += this.activeIndex + ','
      if (this.active2Index) str += this.active2Index + ','
      if (this.active3Index) str += this.active3Index + ','
      getKnowledgeList({
        ...this.params,
        categoryId: str.slice(0, str.length - 1),
        page,
        pageSize
      })
        .then((res) => {
          if (res.code === 200) {
            this.tabelList = res.data.list
            this.paginationConfig.total = res.data.total
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    async getCategoryList() {
      const res = await getCategoryList({})
      if (res.code === 200) {
        this.categoryList = res.data
      }
    },
    handleChangePage({ page, pageSize }) {
      this.paginationConfig.page = page
      this.paginationConfig.pageSize = pageSize
      this.$nextTick(() => {
        if (this.activeIndex || this.active2Index || this.active3Index) {
          return this.getList()
        }
        this.onClickTob({ id: '', name: '全部' })
      })
    },
    onChangeTabs(e) {
      this.params.desc = e
      this.paginationConfig.page = 1
      if (this.activeIndex || this.active2Index || this.active3Index) {
        return this.getList()
      }
      this.onClickTob({ id: '', name: '全部' })
    },
    onClickTob(item) {
      this.paginationConfig.page = 1
      this.activeIndex = item.id
      this.active2Index = ''
      this.active3Index = ''
      this.activeItem = item
      this.getList()
    },
    onClickCenter(item) {
      this.paginationConfig.page = 1
      if (item.id) {
        this.activeIndex = item.parentId
      }
      this.active2Index = item.id
      this.active3Index = ''
      this.active2Item = item
      this.getList()
    },
    onClickBottom(item) {
      this.params.page = 1
      if (item.id) {
        this.activeIndex = item.rootId
        this.active2Index = item.parentId
      }
      this.active3Index = item.id
      this.active3Item = item
      this.getList()
    },
    onClickToDetail(item) {
      this.$router.push({
        path: '/knowledge/detail',
        query: {
          id: item.id
        }
      })
    },
    onLogin() {
      this.$router.replace({
        path: '/login'
      })
    },
    onlogout() {
      this.$store.dispatch('user/logout').then(() => {
        this.$router.push(`/login`)
      })
    },
    onClickRouter(path) {
      this.$router.push({
        path
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.home {
  background-color: #f7f7f7;
}
.header {
  background-color: #fff;
  padding: 10px 20px;
  width: 1000px;
  margin: 0 auto;
  .categoryList {
    margin-bottom: 10px;
    font-size: 1rem;
    &:last-child {
      margin-bottom: 0;
    }
    .item {
      display: inline-block;
      margin-right: 10px;
    }
    .all {
      font-size: 1rem;
      font-weight: bold;
    }
  }
}
.tabs {
  width: 1000px;
  margin: 0 auto;
  margin-top: 20px;
  background-color: #fff;
  padding: 10px 20px;
  //margin-top: 20px;
  .tabs-item {
    font-size: 1rem;
    margin-right: 10px;
  }
}
.category-is-active {
  color: var(--el-color-primary);
  font-weight: bold;
  font-size: 1rem;
}
.container {
  width: 1000px;
  margin: 0 auto;
  min-height: 65vh;
}
.list {
  width: 694px;
  .list-item {
    background-color: #fff;
    //border: 0.5px solid whitesmoke;
    padding: 10px 20px;
  }
  .title {
    font-size: 1.3rem;
    font-weight: bold;
    color: #121212;
  }
  .card {
    display: flex;
    align-items: flex-start;
    .content {
      flex: 1;
      margin-left: 10px;
      .introduce {
        color: #535861;
        font-size: 1rem;
        text-align: left;
        min-height: 5rem;
      }
      .update_time {
        font-size: 1rem;
        color: #999999;
        margin-top: 5px;
      }
    }
  }
  .image {
    width: 100px;
    border-radius: 20px;
    height: 100px;
    object-fit: contain;
    display: inline-block;
  }
}
.user {
  background-color: #fff;
  min-height: 65vh;
  height: 100%;
  padding: 0 20px;
  .el-avatar {
    width: 100px;
    height: 100px;
  }
  .user-cell {
    font-size: 1rem;
    padding-bottom: 10px;
    color: #999999;
  }
}
.pagination {
  margin-top: 20px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>
